<template>
  <div class="container">
    <el-dialog :title="`${form.id ? '编辑' : '新增'}用户`"  :visible="showFormDialog" @close="Cancel()" width="50%">
      <el-form ref="FormRef" :model="form" :rules="rules" size="small" style="width:70%" label-width="auto" >
        <el-form-item label="企业名称" prop="shortName">
          <el-input type="text" v-model="form.shortName" autocomplete="off" />
        </el-form-item>

        <el-form-item label="所属公司" prop="company">
          <el-input v-model="form.company"  type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item> https://www.tianyancha.com （在此可查询所属公司全称及简称）</el-form-item>

        <el-form-item label="城市地区" prop="province">
          <el-select v-model="form.province" style="width:49%"  @change="getData()">
            <el-option v-for="item in provinces" :label="item" :key="item" :value="item" />
          </el-select>
          <el-select v-model="form.city" style="width:49%">
            <el-option v-for="item in citylist" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>

        <el-form-item label="方向(企业标签)" prop="tags">
          <el-input  type="text" v-model="form.tags" placeholder="请输入企业标签" autocomplete="off" />
        </el-form-item>

        <el-form-item label="备注" prop="remarks">
          <el-input type="textarea" v-model="form.remarks" :rows="2" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" style="text-align: center">
        <el-button @click="Cancel">取 消</el-button>
        <el-button type="primary" @click="isOK">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add, detail, update } from '@/api/hmmm/companys'
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  name: 'CompanysAdd',
  props: {
    showFormDialog: {
      type: Boolean,
      require: false
    }
  },
  data () {
    return {
      citylist: [],
      form: {
        shortName: '',
        company: '',
        province: '',
        tags: '',
        remarks: '',
        city: '',
        id: ''
      },
      provinces,
      citys,
      rules: {
        shortName: [{ required: true, message: '企业简称不能为空', trigger: 'blur' }],
        company: [{ required: true, message: '所属公司不能为空', trigger: 'blur' }],
        province: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        tags: [{ required: true, message: '请输入标签', trigger: 'blur' }],
        remarks: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.provinces = provinces()
  },
  methods: {
    // 搜索点击
    async getData () {
      this.citylist = await citys(this.form.province)
      this.form.city = this.citylist[0]
    },
    Cancel () {
      this.form = { }
      this.$refs.FormRef.resetFields()
      this.$emit('update-list')
    },
    async getDetail (id) {
      const { data } = await detail(id)
      this.form = data
      this.citylist = await citys(this.form.province)
    },
    async isOK () {
      await this.$refs.FormRef.validate()
      if (this.form.id) {
        await update({ ...this.form, isFamous: true })
      } else {
        await add({ ...this.form, isFamous: true })
        this.$message.success('新增用户成功')
      }
      this.form = {
        shortName: '',
        company: '',
        province: '',
        tags: '',
        remarks: '',
        city: '',
        id: null
      }
      this.$emit('LoadList', 'LoadList')
      this.$emit('update-list')
    }
  }
}
</script>

<style scoped lang="scss">
    ::v-deep .el-dialog .el-dialog__body {
    display: flex;
    justify-content: center;
    align-items: center;
    }
</style>
